<template>
	<view class="listbg">
		<view class="listitem" @click="godetail(item)" v-for="item in list" :key="item.id">
			<image :src="item.img" mode="aspectFill" lazy-load></image>
			<view class="itemr">
				<text>{{ item.name }}-{{ item.address }}</text>
				<view class="l2">{{ item.introduce }}</view>
				<view class="flex-center btn">捐赠</view>
			</view>
		</view>
	</view>
	<up-loadmore lineColor="#ccc" line :status="status" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ancestralList } from '@/api/ancestra.js';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

onReachBottom(() => {
	page.value++;
	getList();
});

onLoad((e) => {
	getList();
});
let titindex = ref(0);
function settitindex(e) {
	titindex.value = e;
	page.value = 1;
	list.value = [];
	getList();
}

let status = ref('');

let list = ref([]);

let page = ref(1);

let total = ref(0);

function getList() {
	let data = {
		pageSize: 10,
		pageNum: page.value
	};
	status.value = 'loading';

	ancestralList(data).then((res) => {
		status.value = 'nomore';
		total.value = res.total;
		if (page.value == 1) {
			list.value = res.rows;
		} else {
			if (res.rows.length == 0) {
				page.value--;
				return;
			} else {
				list.value = [...list.value, ...res.rows];
			}
		}
	});
}
function godetail(e) {
	uni.navigateTo({
		url: '/pages/donate/money?id=' + e.id
	});
}
</script>

<style lang="scss">
.listbg {
	margin-left: 30rpx;
	overflow: hidden;
	.listitem {
		width: 690rpx;
		height: 248rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top: 24rpx;

		& > image {
			width: 150rpx;
			height: 200rpx;
			background: #c8c8c8;
			margin-left: 24rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.itemr {
			width: 466rpx;

			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #999999;
			margin-left: 20rpx;
			display: flex;
			height: 200rpx;
			flex-direction: column;
			justify-content: space-between;

			& > text {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
			}

			.l2 {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #999999;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.btn {
				width: 140rpx;
				height: 60rpx;
				background: #c7a46f;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #ffffff;
				margin-left: 326rpx;
			}
		}
	}
}

.gru {
	text-align: center;
	margin-top: 40rpx;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #aaaaaa;

	text {
		font-weight: bold;
		color: #a9070c;
	}
}

.tabsbg {
	width: 750rpx;
	white-space: nowrap;

	.tabsitem {
		margin-left: 30rpx;
		width: 166rpx;
		height: 80rpx;
		display: inline-flex;
		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;
		color: #c0c0c0;
		border: 1rpx solid #ffffff;
	}

	.active {
		border: 1rpx solid #111111;
		color: #111111;
	}
}
</style>
